<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>中国共产党指导思想</title>
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/second.css">
		<link rel = 'stylesheet' href="{{ STATIC_URL }}open/font_2669378_1z1i76b0nw9/iconfont.css">
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/sortable.min.css">
		<script type="text/javascript" src="{{ STATIC_URL }}js/sortable.min.js"></script>
		<!--插入背景音乐-->
		<audio id="myaudio" controls="controls" src="{{ STATIC_URL }}open/music/bkmusic.mp3" autoplay="autoplay" loop="loop" style="height: 0;" >

		</audio>
		<script type="text/javascript">
			function toggleSound(){
				var music=document.getElementById("myaudio");//获取id
				console.log(music);
				console.log(music.paused);
				if(music.paused){   //判断是否播放
					music.paused = false;
					music.play();
				}
			}
			setInterval("toggleSound()",1);
		</script>
	</head>
	<body>
		<!-- 巨屏轮播图 -->
		<div id="app"></div>

		<script src='{{ STATIC_URL }}js/react.min.js'></script>
		<script src='{{ STATIC_URL }}js/react-dom.min.js'></script>
		<script src='{{ STATIC_URL }}js/index.min.js'></script>



		<!-- 瀑布流 -->
		<main class="sortable">
			<div class="container">
				<div class="wrapper">
					<!-- <ul class="sortable__nav nav">
						<li>
							<a data-sjslink="all" class="nav__link">
								所有
							</a>
						</li>
						<li>
							<a data-sjslink="flatty" class="nav__link">
								扁平化
							</a>
						</li>
						<li>
							<a data-sjslink="funny" class="nav__link">
								收起
							</a>
						</li>
					</ul> -->
					<div id="sortable" class="sjs-default">
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/xjp.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">习近平新时代中国特色社会主义思想</h2>
									<p class="card__text">
									2017年10月18日，在 中国共产党第十九次全国代表大会上 习近平总书记首次提出“新时代中国特色社会主义思想”。
									新时代中国特色社会主义思想是全党全国人民为实现中华民族伟大复兴而奋斗的行动指南。
									2017年10月24日， 中国共产党第十九次全国代表大会通过了关于《 中国共产党章程（修正案）》的决议，习近平新时代中国特色社会主义思想写入 党章。
									2018年3月11日，第十三届全国人民代表大会第一次会议通过《中华人民共和国宪法修正案》，习近平新时代中国特色社会主义思想写入《中华人民共和国宪法》。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/3d.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">科学发展观——胡锦涛</h2>
									<p class="card__text">
									中共中央总书记 胡锦涛在2003年7月28日的讲话中提出“坚持 以人为本，树立全面、协调、可持续的发展观，促进经济社会和人的 全面发展”，按照“ 统筹城乡发展、统筹区域发展、统筹经济社会发展、统筹 人与自然和谐发展、统筹国内发展和对外开放”的要求推进各项事业的改革和发展的方法论--科学发展观，也是 中国共产党的重大战略思想。
									中国共产党第十七次全国代表大会审议并一致通过十六届中央委员会提出的《中国共产党章程（修正案）》，决定这一修正案自通过之日起生效。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/jzm.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">“三个代表重要思想——江泽民”</h2>
									<p class="card__text">
										“三个代表”重要思想是 江泽民同志2000年2月25日在 广东省考察工作时，从全面总结党的历史经验和如何适应新形势新任务的要求出发，首次对“三个代表”重要思想进行了比较全面的阐述。具体内容为中国共产党始终代表中国先进生产力的发展要求、中国先进文化的前进方向、中国最广大人民的根本利益，是我们党的立党之本、执政之基、力量之源。
										“ 三个代表”重要思想，集中概括了党和国家全部理论活动、实践活动，包括一切工作的根本方向、根本准则、根本依据，成为指引党和国家新世纪伟大进军的行动指南。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/dxp.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">邓小平理论</h2>
									<p class="card__text">
										邓小平理论是一场以“实事求是”为精神实质的思想解放运动过程中产生或引用的旨在打破精神 桎梏，促进社会主义经济和社会发展的一系列指导思想的总汇。邓小平理论与中国在80年代施行的改革开放政策密不可分。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/mzd.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">毛泽东思想</h2>
									<p class="card__text">
									毛泽东思想是马克思列宁主义基本原理和中国革命具体实际相结合的产物，是中国共产党人集体智慧的结晶。是由 毛泽东倡导并在 二十世纪中国革命中大范围实践的一种 政治、 军事、发展理论，一般认为其为 马列主义在中国的发展。 中国共产党认可毛泽东思想是其取得 新民主主义革命、 抗日战争、 国共内战胜利、建立 中华人民共和国的重要理论。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/mksln.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">马克思列宁主义</h2>
									<p class="card__text">
									马克思列宁主义（俄语：марксизм-ленинизм，英语：Marxism-Leninism）简称为马列主义或马列，严格的说是指由 列宁发展起来的 马克思主义。许多不同的政治团体都使用“马克思列宁主义”这个词汇，并以此作为此党理论体系的根本理论，绝大多数 共产党仍将“马克思列宁主义”尊为基本的指导思想，尽管其中有许多政党根据政治环境的新需要而对此主义进行了补充工作。
									</p>
								</div>
							</div>
						</div>
						
						
					</div>
				</div>
			</div>
		</main>

		<script type="text/javascript">
			document.querySelector('#sortable').sortablejs()
		</script>
		
		<div class="footer">
			<div class="location">
				<p><a href="{{ SITE_URL }}ideology/">当前位置</a>&nbsp;&nbsp;&nbsp;>>&nbsp;&nbsp;&nbsp;
					<a href="{{ SITE_URL }}ideology/">中国共产党指导思想</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</p>
			</div>
			
				<div class="footer_nav">
					<span class="iconfont icon-huabian-15"></span><span class="iconfont icon-huabian-15"></span><span class="iconfont icon-huabian-15"></span>
				
				</div>
				<p><br></p>
				<ul>
					<li>
						<span class="iconfont icon-dangjian"></span>
						<a href="{{ SITE_URL }}">首页</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-fazhan1"></span>
						<a href="{{ SITE_URL }}marchOneHundred/">百年征程</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-dangyuan"></span>
						<a href="{{ SITE_URL }}founder/">党的创始人</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-huojianfeiyue"></span>
						<a href="{{ SITE_URL }}leap/">伟大的飞跃</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-dahuiricheng"></span>
						<a href="{{ SITE_URL }}congress/">党的全国代表大会</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-sixiangjianshe"></span>
						<a href="{{ SITE_URL }}ideology/">中国共产党指导思想</a>
					</li>
				</ul>
			</div>		


	</body>
<script>
	class CitiesSlider extends React.Component {
  constructor(props) {
    super(props);

    this.IMAGE_PARTS = 4;

    this.changeTO = null;
    this.AUTOCHANGE_TIME = 4000;

    this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };
  }

  componentWillUnmount() {
    window.clearTimeout(this.changeTO);
  }

  componentDidMount() {
    this.runAutochangeTO();
    setTimeout(() => {
      this.setState({ activeSlide: 0, sliderReady: true });
    }, 0);
  }

  runAutochangeTO() {
    this.changeTO = setTimeout(() => {
      this.changeSlides(1);
      this.runAutochangeTO();
    }, this.AUTOCHANGE_TIME);
  }

  changeSlides(change) {
    window.clearTimeout(this.changeTO);
    const { length } = this.props.slides;
    const prevSlide = this.state.activeSlide;
    let activeSlide = prevSlide + change;
    if (activeSlide < 0) activeSlide = length - 1;
    if (activeSlide >= length) activeSlide = 0;
    this.setState({ activeSlide, prevSlide });
  }

  render() {
    const { activeSlide, prevSlide, sliderReady } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", { className: classNames('slider', { 's--ready': sliderReady }) }, /*#__PURE__*/
      React.createElement("p", { className: "slider__top-heading" }, "Guiding Ideology"), /*#__PURE__*/
      React.createElement("div", { className: "slider__slides" },
      this.props.slides.map((slide, index) => /*#__PURE__*/
      React.createElement("div", {
        className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),
        key: slide.city }, /*#__PURE__*/

      React.createElement("div", { className: "slider__slide-content" }, /*#__PURE__*/
      React.createElement("h3", { className: "slider__slide-subheading" }, slide.country || slide.city), /*#__PURE__*/
      React.createElement("h2", { className: "slider__slide-heading" },
      slide.city.split('').map(l => /*#__PURE__*/React.createElement("span", null, l))), /*#__PURE__*/

      React.createElement("p", { className: "slider__slide-readmore" }, "查看详情>>")), /*#__PURE__*/

      React.createElement("div", { className: "slider__slide-parts" },
      [...Array(this.IMAGE_PARTS).fill()].map((x, i) => /*#__PURE__*/
      React.createElement("div", { className: "slider__slide-part", key: i }, /*#__PURE__*/
      React.createElement("div", { className: "slider__slide-part-inner", style: { backgroundImage: `url(${slide.img})` } }))))))), /*#__PURE__*/






      React.createElement("div", { className: "slider__control", onClick: () => this.changeSlides(-1) }), /*#__PURE__*/
      React.createElement("div", { className: "slider__control slider__control--right", onClick: () => this.changeSlides(1) })));


  }}


const slides = [
{
  city: '毛泽东思想',
  country: '1945年，中共七大',
  img: '{{ STATIC_URL }}open/images/mzdsx.jpeg' },

{
  city: '邓小平理论',
  country:'1997年，中共十五大',
  img: '{{ STATIC_URL }}open/images/dxpll.jpeg' },

{
  city: '“三个代表重要思想”',
  country: '2002年，中共十六大',
  img: '{{ STATIC_URL }}open/images/sgdbzysx.jpeg' },

{
  city: '科学发展观',
  country: '2007年，中共十七大',
  img: '{{ STATIC_URL }}open/images/kxfzg.jpeg' },

{
  city: '习近平新时代中国特色社会主义思想',
  country: '2017年，中共十九大',
  img: '{{ STATIC_URL }}open/images/xjpxsdzgtsshzysx.jpeg' }];



ReactDOM.render( /*#__PURE__*/React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));
</script>


</html>
